{% extends "_layouts/examples.html" %}
{% block title %}Lists / All variations with horizontal divider{% endblock %}

{% block standalone_css %}patterns_lists{% endblock %}

{% block content %}
<ul class="p-list--divided">
  <li class="p-list__item has-bullet">
    Balance compute load in the cloud
    <ul class="p-list--divided">
      <li class="p-list__item has-bullet">Balance compute load in the cloud</li>
    </ul>
  </li>
  <li class="p-list__item is-ticked">
    Balance compute load in the cloud
    <ul class="p-list--divided">
      <li class="p-list__item is-ticked">Balance compute load in the cloud</li>
    </ul>
  </li>
  <li class="p-list__item">
    Balance compute load in the cloud
    <ul class="p-list--divided">
      <li class="p-list__item">Balance compute load in the cloud</li>
    </ul>
  </li>
</ul>
<ol class="p-list--divided p-list--nested-counter">
  <li class="p-list__item">
    Balance compute load in the cloud
    <ol class="p-list--divided">
      <li class="p-list__item">Balance compute load in the cloud</li>
    </ol>
  </li>
</ol>
{% endblock %}
